<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1{width:1000px;height:100px;border: solid #000 1px;position: relative;padding: 10px 0;margin: 10px 0;}
    .xbox1{width:100px;height:100px;background: red;position: absolute;left:0;}
    .box2{width:1000px;height:100px;border: solid #000 1px;position: relative;padding: 10px 0;margin: 10px 0;}
    .xbox2{width:100px;height:100px;background: red;position: absolute;left:0;}
  </style>
</head>
<body>
  <div class="box1">
    <div class="xbox1"></div>
  </div>

  <div class="box2">
    <div class="xbox2"></div>
  </div>
  
</body>
<script>

  const box1 = document.querySelector(".box1");
  const box2 = document.querySelector(".box2");
  const xbox1 = document.querySelector(".xbox1");
  const xbox2 = document.querySelector(".xbox2");

  box1.onmouseover = function(){
    move(xbox1, "left", 900);
  }
  box2.onmouseover = function(){
    move(xbox2, "top", 900);
  }

  // 多元素，不同属性，任意目标的缓冲运动
  function move(ele, attr, target){
    // 为了防止重复开启计时器，每次开启之前都先关闭
    // 为了防止页面上多个元素的运动互相之间的影响
    // 将计时器开到元素对象身上
    clearInterval(ele.t);
    ele.t = setInterval(()=>{
      // 利用获取非行内样式操作替换offset系列方法获取当前值
      let now = parseInt(getStyle(ele, attr));

      let speed = (target - now) / 10;
      speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
      if( target === now ){
        clearInterval(ele.t);
      }else{
        ele.style[attr] = now + speed + "px";
      }
    }, 30);
  }


  
  function getStyle(ele, attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
  }
  
</script>
</html>